<template>
	<view class="account-binding-contaner">
        <u-cell-group>
            <u-cell-item title="QQ账号" :value="bind['QQ'] ? '已绑定' : '未绑定'" @click="handleClickBind('QQ')">
                <u-icon class="u-m-r-20" slot="icon" size="60" name="qq-fill" color="#EB4F38"></u-icon>
            </u-cell-item>
            <u-cell-item title="微信账号" :value="bind['WECHAT'] ? '已绑定' : '未绑定'" @click="handleClickBind('WECHAT')">
                <u-icon class="u-m-r-20" slot="icon" size="60" name="weixin-fill" color="#EB4F38"></u-icon>
            </u-cell-item>
            <u-cell-item title="微博账号" :value="bind['WEIBO'] ? '已绑定' : '未绑定'" @click="handleClickBind('WEIBO')">
                <u-icon class="u-m-r-20" slot="icon" size="60" name="weibo" color="#EB4F38"></u-icon>
            </u-cell-item>
            <u-cell-item title="支付宝" :value="bind['ALIPAY'] ? '已绑定' : '未绑定'" @click="handleClickBind('ALIPAY')">
                <u-icon class="u-m-r-20" slot="icon" size="60" name="zhifubao" color="#EB4F38"></u-icon>
            </u-cell-item>
        </u-cell-group>
        <u-action-sheet :list="bindActions" v-model="showAction" @click="handleBindChange"></u-action-sheet>
	</view>
</template>

<script>
    import * as API_Connect from '@/api/connect.js'
	export default {
		data() {
			return {
                bind: '',
                showAction: false,
                bindActions: [
                    { text: '绑定' },
                    { text: '解绑' }
                ],
                cur_name: ''
			};
		},
        onLoad() {
            this.getConnectList()
        },
        methods: {
            handleClickBind(name) {
                this.cur_name = name
                this.showAction = true
            },
            handleBindChange(index) {
                const name = this.bindActions[index].text
                const { cur_name: type } = this
                this.showAction = false
                name === '绑定' ? this.bindConnect(type) : this.unbindConnect(type)
            },
            /** 解绑 */
            unbindConnect(type) {
                console.log('解绑',type)
            },
            /** 发起绑定 */
            bindConnect(type) {
                API_Connect.getLogindConnectUrl(type).then(response => {
                    console.log('绑定链接', response)
                })
            },
            getConnectList() {
                API_Connect.getConnectList().then(response => {
                    const bind = {}
                    response.forEach(item => {
                        bind[item.union_type] = item.is_bind
                    })
                    this.bind = bind
                })
            }
        }
	}
</script>

<style lang="scss">

</style>
